<template>
    <div id="uploadimage">
        <el-dialog
            title="新增列表"
            :visible.sync="showimage"
            width="40%"
            :before-close="handleClose">
            <el-form :model="gamesInfo" :rules="rules" ref="gamesInfo">
                <table>
                    <tr>
                        <td>彩票英文名</td>
                        <td>
                            <el-form-item prop="en">
                                <el-input v-model="gamesInfo.en"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>彩票中文名</td>
                        <td>
                            <el-form-item prop="cn">
                                <el-input v-model="gamesInfo.cn"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>icons</td>
                        <td>
                            <ul style="display:flex;flex-direciton:row">
                                <el-form-item prop="smIcon">
                                    <label for="smIcon"  style="width:40px;height:40px;font-size:12px" ref="smIcon"> <i class="el-icon-plus"></i></label>
                                    <input type="file" id="smIcon" title="asdfa" @change="selectFile(40,40,$event)" name="icon">
                                </el-form-item>  
                                    <span style="font-size:14px">请上传40x40大小的图片</span>

                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td>icons</td>
                        <td>
                            <ul style="display:flex;flex-direciton:row">
                                <el-form-item prop="bigIcon">
                                <label for="bigIcon"  style="width:90px;height:90px" ref="bigIcon"> <i class="el-icon-plus"></i></label>
                                <input type="file" id="bigIcon" title="asdfa" @change="selectFile(90,90,$event)" name="icon">
                                </el-form-item>
                            </ul>
                        </td>
                    </tr>
                </table>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button type="primary" @click="addNewGame">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    props:['showimage'],
      data(){
        return {
            uploadFiles: [],
            gamesInfo:{smIcon:'',bigIcon:''},
            rules: {
                en: [
                    {required: true,message:'请输入彩票的英文名',trigger:'blur'},
                    {min:2,message:'最少输入两个字符',trigger:'blur'}
                ],
                cn: [
                    {required: true,message:'请输入彩票的中文名',trigger:'blur'},
                    {min:2,message:'最少输入两个字符',trigger:'blur'}
                ],
                smIcon: [
                    {required: true,message:'请选择图片',trigger:'change'},
                ],
                bigIcon: [
                    {required: true,message:'请选择图片',trigger:'change'},
                ]
            }
        }
    },
    methods: {
        handleClose(){
            var smIcon = this.$refs.smIcon;
            var bigIcon = this.$refs.bigIcon;
            smIcon.innerHTML = '<i class="el-icon-plus"></i>';
            bigIcon.innerHTML ='<i class="el-icon-plus"></i>';
            this.$refs['gamesInfo'].resetFields();
            this.uploadFiles = [];
            this.$parent.showimage = false;
        },
        addNewGame(){
            this.$refs['gamesInfo'].validate((valid) => {
            if (valid) {
                console.log("测试")
                var fd = new FormData();
                for(var i=0;i<this.uploadFiles.length;i++){
                    fd.append("file",this.uploadFiles[i]);
                }
                // fd.append("file",this.uploadFiles[0]);
                fd.append('en',this.gamesInfo.en);
                fd.append('cn',this.gamesInfo.cn);
                let config = {  
                    headers:{'Content-Type':'multipart/form-data'}  
                };
                
                axios.post(this.$apis.addphoto,fd,config)
                .then((resp)=>{
                    console.log(resp);
                    console.log(resp.message);
                    this.$message({
                        message: resp.data.message,
                        type: resp.data.success?'success':'danger'
                    });

                    if(resp.data.success){
                        //重新获取数据
                        this.$store.dispatch('loadAllGames',{apis:this.$apis.caipiao})
                    }
                    //请求添加成功之后,重新发起请求,获取彩种的列表
                    this.handleClose();
                }).catch((error)=>{
                    console.log(error);
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });


        },
        //打开图片选择和裁剪界面
        selectFile(width,height,event){
            console.log("宽是"+width);
            var e = event || window.event;
            let file = e.target.files[0];
            var url = this.getObjectURL(file);
            var image = new Image();
            image.src = url;
            console.log(image);
            image.onload = ()=>{
                if(image.width!=width||image.height!=height){
                    alert(`请上传尺寸为宽${width},高${height}的图片`);
                }else{
                    if(width==40){
                       
                        this.uploadFiles.push(file);
                        var smIcon = this.$refs.smIcon;
                        smIcon.innerHTML=image.outerHTML;
                        this.gamesInfo.smIcon = true;
                    }
                    if(width==90){

                        this.uploadFiles.push(file);
                        var bigIcon = this.$refs.bigIcon;
                        bigIcon.innerHTML=image.outerHTML;
                        this.gamesInfo.bigIcon = true;
                    }
                }
            }
            //文件预览
            console.log(file);
        },
        //取得该文件的url 
        getObjectURL(file) { 
        　　var url = null ; 
        　　if (window.createObjectURL!=undefined) { 
        　　　　url = window.createObjectURL(file) ; 
        　　} else if (window.URL!=undefined) { 
        　　　　url = window.URL.createObjectURL(file) ; 
        　　} else if (window.webkitURL!=undefined) { 
        　　　　url = window.webkitURL.createObjectURL(file) ; 
        　　} 
        　　return url ; 
        }
    }
}
</script>
<style lang="scss" scoped>
    #load{
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    line-height: 40px;
    vertical-align: top;
}
label {
      padding: 0 5px;
      font-size: 30px;
      border-radius: 5px;
      color: #333;
      border: 1px dashed #ccc;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    #smIcon,#bigIcon {
      display: none;
      margin-top: 100px;
    }
</style>


